<template>
<div class="ordervue" ref="war">
	
	
	
    <ul>
        <li v-for="(item,index) in orderdata" :key="index">
            <p><span>{{item.sellerName}}</span><span>已支付</span></p>
            <p><i> 菜品份数{{item.oofCount}} </i></p>
           <p><span>￥{{item.paidPrice}}</span><span @click="todetail(item)">查看详情<i class="i icon-keyboard_arrow_right"></i></span></p>
        </li>
       {{init}}
       <p style="font-size: 0.3rem;line-height:0.6rem;text-align: center;box-sizing: border-box;" v-show="showload">{{loadtext}}</p>
    </ul> 
	
</div>
</template>

<script>
import BScroll from 'better-scroll'
import xiala from './xiala'
var menuScroll
export default {
  name: 'order',
  data(){
    return {
    	//  上拉加载数据
                scrollHeight: 0,
                scrollTop: 0,
                containerHeight: 0,
                loading: false,
                allLoaded: false,
                bottomText: '上拉加载更多...',
                bottomStatus: '',
                pageNo: 1,
                totalCount: '',
                scrolly:0,
                showload:false,
                scrolly:0,
                loadtext:'加载中'
    }
  },
  props:["orderdata","allflag"],
  computed:{
    init:function(){
    	var _this=this
      if(this.orderdata.length>5){
        this.$nextTick(function(){
 this.initscroll()
 _this.showload=false
        })
      }
      if(_this.allflag){
      	this.$nextTick(function(){
      		_this.showload=true
      	_this.loadtext="没有更多数据了"
      	})
      }
    }
  },
  methods:{
  	   /* 下拉加载 */
      todetail:function(data){
        this.$store.commit("getorderdetail",data.id)
          this.$router.push("/detail")
      },
      initscroll:function(){
        var _this=this;
        	menuScroll=new BScroll(this.$refs.war,{
	    			click:true
	    		});
	    		menuScroll.scrollTo(0,_this.scrolly)
	    	menuScroll.on("touchend",function(position){
	    		if(position.y < (menuScroll.maxScrollY - 30)&&_this.showload==false&&!_this.allflag){
	    			_this.scrolly=menuScroll.absStartY
	    			_this.showload=true
	    			_this.$emit("nextto")
	    		}
	    	})
      }
  },
  components:{
  	xiala
  }
}
</script>

<style lang="stylus">
.ordervue
  background white
  width 100%
  height 100%
  overflow hidden
  box-sizing border-box
  ul
    overflow auto
    li
      line-height 0.5rem
      background white
      text-align left 
      box-sizing border-box
      padding 0.2rem 0.3rem
      &:after
        content ''
        width 100%
        border-top 1px solid #dddddd
        display block
        margin-top 0.05rem 
      i 
        font-size 0.22rem
        margin 0.1rem 0
        color rgba(150,150,150,0.8)      
      p
        width 100%
        font-weight 700
        overflow auto
        height auto
        text-align left 
        font-size 0.32rem
        &:first-child
          span 
            float left
            font-weight 700
            font-size 0.32rem
            &:last-child
              float right 
              padding-right 0.3rem
              font-size 0.2rem
        &:last-child
          span 
            float left
            font-weight 700
            font-size 0.32rem
            &:last-child
              float right 
              padding-right 0.3rem
              font-size 0.3rem 
              font-weight 600     
</style>
